import { Button, Col, Row } from 'antd';
import { WeaSwitch, WeaTableNew } from 'comsMobx'
import { WeaHelpfulTip, WeaInputNumber, WeaSelect, WeaLocaleProvider, WeaTable } from 'ecCom';
import { each } from 'lodash';
import { observer, toJS } from 'mobx-react';
import * as React from 'react';
import * as Operator from './operatorData';
//const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class OperatorSet extends React.Component {
    render() {
        const { store } = this.props;
        const { form, itemType, changeItemType } = store;
        //const { form, changeItem, itemType, operatorTableStore } = addNodeForm;
        const nodetype = form.$('nodeType').values();
        const operatorType = form.$('operatorType').values();

        const key = nodetype === "0" ? "0" : (parseInt(operatorType) + 1) + "";
        const options = Operator.options[key];

        const columns = [{
            title: getLabel('502365', '类型'),
            dataIndex: 'type',
            key: 'type',
            width: "20%",
        }, {
            title: getLabel('502347', '名称'),
            dataIndex: 'name',
            key: 'name',
            width: "30%",
        }, {
            title: getLabel('502366', '级别'),
            dataIndex: 'levelString',
            key: 'levelString',
            width: "20%",
        }];
        const rowSelection = {
            type: 'checkbox',
            onChange: (v1, v2) => {
                console.log(v1, v2);
                store.tableSelectedRowKeys = v1
                console.log(store.tableSelectedRowKeys)
            }
        };
        return (
            <div>
                {/* <div className='edc-operator-group'>
                    <Row style={{ padding: '10px 18px 0px 18px' }} >
                        <Col span={24}>
                            <WeaSelect
                                className="edc-addNode-set-select"
                                detailtype={3}
                                options={options}
                                value={itemType}
                                onChange={changeItemType}
                            // style={{ 'margin': '10px 10px 0px 20px', lineHeight: '25px' }}
                            />
                        </Col>
                    </Row>
                    <Row className='form-item' style={{ padding: '5px 18px 0px 18px' }}>
                        {this.getItemForm(itemType)}
                    </Row>
                    {this.getCondition()}
                </div> */}
                <Row style={{ lineHeight: '45px' }}>
                    <Col span={12} >{getLabel('502681', '已设置操作者')}</Col>
                    {/* <Col span={12} style={{ paddingRight: 10, textAlign: 'right' }}>{this.getTableBtns()}</Col> */}
                </Row>
                <div className='edc-operator-table'>
                    {/* <WeaTable
                        comsWeaTableStore={operatorTableStore}
                        hasOrder={true}
                        needScroll={false}
                        pagination={false}
                        register_table={store.reloadTable}
                        uniqueId={true}
                        needRowCheck={true}
                    /> */}
                    <WeaTable
                        columns={columns}
                        dataSource={store.operatorDataSource}
                        pagination={false}
                        scroll={{ x: false, y: 200 }}
                        rowSelection={rowSelection} />
                    {/* <WeaTableEdit
                        ref={ref => { this.tableEdit = ref }}
                        showTitle={false}
                        columns={columns}
                        datas={datas}
                        //draggable={false}
                        showAdd={false}
                        showCopy={false}
                        showDelete={false}
                        onChange={this.onChange}
                        onRowSelect={this.onRowSelect}
                        //selectedRowKeys={selectedRowKeys}
                    /> */}
                </div>
            </div>
        )
    }


    getTableBtns() {
        const { store } = this.props;
        const {  deleteOperator } = store;
        //const selectedLen = operatorTableStore.selectedRowKeys.length;
        const selectedLen = store.tableSelectedRowKeys.length;
        const buttons = [
            (<Button disabled={selectedLen <= 0} type="ghost" className='table-btn' onClick={deleteOperator}>{getLabel('506051', '批量删除')}</Button>),
        ];
        return buttons;
    }

    getItemForm = (itemType) => {
        console.log("itemType", itemType);
        const { store } = this.props;
        const { operatorForm } = store;
        const formInfo = Operator.formInfo;
        const typeDetail = formInfo[itemType] || {};
        const formParams = operatorForm.getFormParams();

        const com = [];
        if (operatorForm.isFormInit) {
            const { linkAge = {}, items = [] } = typeDetail;
            let flag = false;
            const Domkeys = [];
            items.forEach((item) => {
                const domkey = item.domkey[0];
                if (linkAge.hasOwnProperty('secField')) {
                    const link = linkAge.secField[formParams.secField] || [];
                    if (flag) {
                        if (link.length > 0) {
                            if (link.indexOf(domkey) === -1) {
                                return;
                            }
                        } else {
                            return;
                        }
                    }
                }
                if (domkey === 'secField') {
                    flag = true;
                }
                // 收集有效的domkeys
                Domkeys.push(domkey);
                if (item.conditionType === 'SELECT_LINKAGE') {
                    const linkids = this.getLinkIds(item.selectLinkageDatas);
                    if (linkids.indexOf(formParams[domkey]) !== -1) {
                        const item0 = item.selectLinkageDatas[formParams[domkey]];
                        Domkeys.push(item0.domkey[0]);
                    }
                }

                // 浏览数据定义表单字段数据过滤
                if (item.conditionType === 'BROWSER') {
                    const dataParams = item.browserConditionParam.dataParams;
                    if (Object.keys(dataParams).length > 0) {
                        item.browserConditionParam.dataParams = { ...dataParams };
                        item.browserConditionParam.completeParams = { ...dataParams };
                    }
                }
                com.push(this.getItem(item, operatorForm, itemType));
            });
        }
        return com;
    }

    getItem = (item, operatorForm, itemType) => {
        const domkey = item.domkey[0];
        if (!operatorForm.has(domkey)) return null;
        const formParams = operatorForm.getFormParams();
        // 判断label是否需要后置
        const showLastLabel = item.hasOwnProperty('otherParams') && item.otherParams.hasOwnProperty('showLastLabel');
        // 是否显示label
        const showLabel = item.labelcol === 0 ? false : true;
        // 是否显示提示
        const showTips = item.hasOwnProperty('otherParams') && item.otherParams.hasOwnProperty('showTips');
        const tips = showTips ? item.otherParams.showTips : {};
        const tipTitle = showTips ? tips[formParams[domkey]] : '';
        // 是否有协办人
        const hasCoadjutant = item.hasOwnProperty('otherParams') && item.otherParams.hasOwnProperty('hasCoadjutant');
        // 是否有数据联动
        // let isValueMapping = item.hasOwnProperty('otherParams') && item.otherParams.hasOwnProperty('valueMapping');
        // 样式特殊调整class
        const className = item.hasOwnProperty('otherParams') && item.otherParams.hasOwnProperty('className') ? item.otherParams.className : '';
        return (
            <div className={`itemCol ${item.conditionType} ${item.conditionType}-${className}`}>
                {showLabel && <span title={item.label} className="labelStyle">{item.label}：</span>}
                <WeaSwitch fieldConfig={item} form={operatorForm} formParams={formParams} onChange={this.onChange} />
                {showLastLabel && <span title={item.otherParams.lastLabel} style={{ marginLeft: 5, maxWidth: item.otherParams.lastLabel.length > 6 ? '90px' : '60px' }} className="labelStyle">{item.otherParams.lastLabel}</span>}
                {showTips && <WeaHelpfulTip
                    style={{ marginLeft: '10px', verticalAlign: 'top', display: 'inline-block', lineHeight: '30px' }}
                    width={196}
                    title={tipTitle}
                />
                }
                {hasCoadjutant &&
                    <span style={{ position: 'relative', left: '15px' }}>
                        {getLabel('502682', '协办人')}：
                  <i className="icon-coms-Flow-setting" style={{ position: 'relative', top: '2px', cursor: 'pointer', fontSize: '14px' }} />
                        <i className="icon-coms-Selected" style={{ position: 'relative', top: '2px', color: '#70D256' }} />
                    </span>
                }
            </div>

        );
    }

    openRuleDesin = () => {
        window.console.log(1);
    }

    // 第三排tab
    getCondition = () => {
        const { store } = this.props;
        const { setOrder, order } = store;
        return (
            <Row className='tab-3' style={{ borderTop: '1px solid #d9d9d9', padding: '8px', display: 'table', width: '100%', marginTop: 10 }}>
                {/* <div style={{ display: 'table-cell', verticalAlign: 'middle', width: '65%' }}>
                    <div style={{ lineHeight: '30px', marginRight: '15px', display: 'inline-block', verticalAlign: 'middle' }}>
                        <span style={{ paddingLeft: '12px' }}>{getLabel('502683','条件')}：</span>
                        <i className="icon-coms-Flow-setting" style={{ position: 'relative', top: '2px', cursor: 'pointer', fontSize: '14px' }} onClick={this.openRuleDesin} />
                    </div>
                    <div style={{ display: 'inline-block', width: '80%', verticalAlign: 'middle' }}>
                        <span className='child-item wdb'>yiyiyiyi</span>
                    </div>
                </div> */}

                {false && <div style={{ display: 'table-cell', verticalAlign: 'middle', textAlign: 'right' }}>
                    <Col style={{ marginTop: '5px' }} span={10}>{getLabel('502684', '批次')}：</Col>
                    <Col span={12}><WeaInputNumber hideOps={true} precision={2} min={0} max={999.99} value={order} onChange={setOrder} /></Col>
                </div>}

                <div style={{ display: 'table-cell', verticalAlign: 'middle', textAlign: 'right' }}>
                    <Button type='primary' onClick={this.confirm}>{getLabel('502685', '添加操作者设置')}</Button>
                </div>
            </Row>
        );
    }

    // 点击添加按钮事件
    confirm = () => {
        const { store } = this.props;
        store.addOperator();
    }
    onChange = (v) => {
        window.console.log(v);
    }

    getLinkIds = (selectLinkageDatas) => {
        const linkIds = [];
        each(selectLinkageDatas, (value, key) => {
            linkIds.push(key);
        })
        // for (let key in selectLinkageDatas) {
        //     linkIds.push(key);
        // }
        return linkIds;
    }
}